//引入富文本编辑器
import Editor from "./../../../components/Editor";
import {
    Form,
    Button,
    Upload,
    Input,
    Image,
    Switch,
    Select,
    Radio,
} from "antd";
import { UploadOutlined } from "@ant-design/icons";
import { useState } from "react";
import { getfindOne, editFind } from "./../../../api/find";
const { Option } = Select;

const formItemLayout = {
    labelCol: {
        span: 6,
    },
    wrapperCol: {
        span: 14,
    },
};

const EditFind = (props) => {
    const [form] = Form.useForm();
    // 被编辑的发现数据的id
    const findid = props.history.location.search.split("=")[1];
    useState(() => {
        getfindOne({ findid: findid }).then((res) => {
            console.log(res.data.data);
            form.setFieldsValue({
                category: res.data.data[0].category,
                title: res.data.data[0].title,
                isshow: res.data.data[0].isshow,
                isrecommend: res.data.data[0].isrecommend,
                from: res.data.data[0].from,
            });
            res.data.data[0].img && setUrl(res.data.data[0].img);
        });
    }, []);
    const [url, setUrl] = useState("");
    const [outerhtml, setOuterhtml] = useState("");

  const normFile = (e) => {
    if (e.fileList[0]) {
      const reader = new FileReader();
      reader.onloadend = (e) => {
        setUrl(e.target.result);
      };
      reader.readAsDataURL(e.file); //把图片转换成base64位格式
      return e && e.fileList;
    }
  };
  const onFinish = (values) => {
    values.img = values.img[0].thumbUrl;
    const Valuess = JSON.parse(JSON.stringify(values));
    Valuess.findid = findid;
    Valuess.detail = outerhtml; // 因为这里的 outerhtml 是全局的，所以直接赋值
    editFind(Valuess).then((res) => {
        props.history.go(-1);
    });
  };

    //阻止图片的默认上传
    const beforeUpload = (picture) => {
        // setUrl(e.fileList[0].thumbUrl);
        return false;
    };

    //富文本编辑器中的方法
    const handlerGetHtml = (outerhtml) => {
        setOuterhtml(outerhtml);
    };

    return (
        <Form
            form={form}
            name="validate_other"
            {...formItemLayout}
            onFinish={onFinish}
        >
            <Form.Item
                name="category"
                label="分类"
                hasFeedback
                rules={[{ required: true, message: "请选择分类" }]}
            >
                <Select placeholder="请选择">
                    <Option value="推荐">推荐</Option>
                    <Option value="儿科">儿科</Option>
                    <Option value="皮肤">皮肤</Option>
                    <Option value="消化">消化</Option>
                    <Option value="呼吸">呼吸</Option>
                    <Option value="内分泌">内分泌</Option>
                </Select>
            </Form.Item>
            <Form.Item
                {...formItemLayout}
                name="title"
                label="标题"
                rules={[
                    {
                        required: true,
                        message: "请输入标题",
                    },
                ]}
            >
                <Input placeholder="请输入标题" />
            </Form.Item>
            <Form.Item
                name="img"
                label="列表图"
                valuePropName="fileList"
                getValueFromEvent={normFile}
                rules={[
                    {
                        required: true,
                        message: "请选择发现图片",
                    },
                ]}
            >
                <Upload name="logo" listType="picture" beforeUpload={beforeUpload}>
                    <Button icon={<UploadOutlined />}>Click to upload</Button>
                    {/* <Image src={ url } /> */}
                </Upload>
            </Form.Item>
            <Form.Item
                wrapperCol={{
                    span: 12,
                    offset: 6,
                }}
            >
                <Image src={url} />
            </Form.Item>
            <Form.Item
                name="isshow"
                label="状态"
                valuePropName="checked"
                rules={[
                    {
                        required: false,
                    },
                ]}
            >
                <Switch />
            </Form.Item>
            <Form.Item
                name="isrecommend"
                label="是否推荐"
                rules={[
                    {
                        required: true,
                        message: "请选择是否推荐！",
                    },
                ]}
            >
                <Radio.Group>
                    <Radio value={true}>是</Radio>
                    <Radio value={false}>否</Radio>
                </Radio.Group>
            </Form.Item>
            <Form.Item
                {...formItemLayout}
                name="from"
                label="来源"
                rules={[
                    {
                        required: true,
                        message: "请输入来源",
                    },
                ]}
            >
                <Input placeholder="请输入来源!" />
            </Form.Item>
            <Form.Item {...formItemLayout} label="详情">
                <Editor getHtml={handlerGetHtml} />
        渲染富文本编辑器
        <div dangerouslySetInnerHTML={{ __html: outerhtml }}></div>
            </Form.Item>

            <Form.Item
                wrapperCol={{
                    span: 12,
                    offset: 6,
                }}
            >
                <Button type="primary" htmlType="submit">
                    确认
        </Button>
            </Form.Item>
        </Form>
    );
};
export default EditFind;
